<template>
  <div>
    <!-- 选择渲染时显示位置，和地图比例 -->
    <baidu-map class="map" :center="center" :zoom="15" :scroll-wheel-zoom="true">
      <bm-polyline strokeColor="red" :strokeWeight="10" :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5"
                   :stroke-weight="2" :editing="false" @lineupdate="updatePolylinePath"></bm-polyline>
    </baidu-map>
  </div>
</template>

<script>

export default {
  name: 'orderCargoTrack',
  props: ['polylinePath'],
  data() {
    return {
      center: {lng: 116.405, lat: 39.920},
      polylinePaths: []
    }
  },
  methods: {
    updatePolylinePath(e) {
      this.polylinePaths = e.target.getPath()
    }
  },
  watch: {
    polylinePath: function (polylinePath) {
      this.center = polylinePath.get(0)
      this.polylinePaths = polylinePath
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 600px;
}
</style>
